import Taro, {Component, Config} from '@tarojs/taro'
import {Form, View, Textarea, Input, Button} from '@tarojs/components'

import {observer, inject} from '@tarojs/mobx'
import {IStoreProps} from '../../store/Stores'
import {getRuntime} from '../../utils/common'


import './index.less'
import './demand.less'

interface IHomeProps extends IStoreProps {}

@inject("stores")
@observer
class Demand extends Component<IHomeProps> {

  state = {
    publicationType: "1", // 发布类型 1需求
    description:'',
    contacts: '',
    phone: '',
    wechatNo: '',
    qqNo: '',
    address: '',
    loading: false,
    disabled: false,
    submitText: '立即发布'
  }

  componentWillMount() {
    Taro.setNavigationBarTitle({title: '发布需求'})
  }

  formSubmit (e) {
    const { homeStore } = this.props.stores
    let { publicationType } = this.state
    let { description,contacts,phone,wechatNo,qqNo,address } = e.detail.value
    if(!description){
      getRuntime().showToast('需求内容不能为空~')
      return
    }
    if(!contacts){
      getRuntime().showToast('联系人不能为空~')
      return
    }
    if(!phone){
      getRuntime().showToast('联系电话不能为空~')
      return
    }
    this.setState({
      loading: true,
      disabled: true,
      submitText: '数据提交中...'
    })
    homeStore.saveUserInfomations({
      form:{
        publicationType, description, contacts, phone, wechatNo, qqNo, address
      },
      callBack: () => {
        this.setState({
          loading: false,
          disabled: false,
          submitText: '立即发布'
        })
        getRuntime().showToast('数据提交成功~')
        setTimeout( () => {
          getRuntime().navigateTo('/pages/newest/index')
        },2000)
      }
    })
  }

  inputChange(e) {
    let value = e.detail.value
    let ind = 0
    for (let i in value){
      if(value.charAt(i) > 0){
        ind = i; break;
      }
    }
    return value.substr(ind)
  }

  render() {
    let { description, contacts, phone,loading,disabled,submitText } = this.state
    return (
      <View className='from-wrap'>
        <Form onSubmit={this.formSubmit.bind(this)}>
        <View className='input-group'>
          <Textarea className='from-textarea' placeholderClass='placeholder-class'
                    placeholder='请填写您要发布需求的具体内容(必填)'
                    value={description}
                    name='description'
          />
        </View>
        <View className='interval' />
        <View className='item-group pt0 pb0'>
          <View className='input-group'>
            <View className='input-name is-require'>联系人</View>
            <Input className='from-input' placeholder='请填写联系人姓名' placeholderClass='placeholder_class'
                   name='contacts'
                   value={contacts}
            />
          </View>

          <View className='input-group'>
            <View className='input-name is-require'>联系电话</View>
            <Input className='from-input' placeholderClass='placeholder_class' placeholder='请填写联系电话' name='phone'
                    value={phone}
            />
          </View>

          <View className='input-group input-switch'>
            <View className='input-name'>微信号</View>
            <Input className='from-input' placeholderClass='placeholder_class' placeholder='请填写微信号' name='wechatNo' />
          </View>

          <View className='input-group'>
            <View className='input-name'>QQ号</View>
            <Input className='from-input' placeholderClass='placeholder_class' placeholder='请填写QQ号' name='qqNo' />
          </View>

          <View className='input-group '>
            <View className='input-name'>联系地址</View>
            <Input className='from-input' placeholderClass='placeholder_class' placeholder='请填写联系地址' name='address' />
          </View>
        </View>

        <Button className='from-submit' formType="submit" type={"primary"} loading={loading} disabled={disabled}>{submitText}</Button>
        </Form>
      </View>
    )
  }
}

export default Demand
